<script setup lang="ts">
import selects from "@/components/common/selects.vue";
import { ref } from "@vue/reactivity";
type Props = {
  step?: number;
};
let props = withDefaults(defineProps<Props>(), {
  step: 0,
});
const emits = defineEmits<{
  (e: "update:step", value: number): never;
}>();

let complaintList = ["民营企业", "个体工商户", "个体用户", "其它类型"];
let complaintTxt = ref("");

let changeComplaintTxt = (v: string) => {
  complaintTxt.value = v;
};
let str =
  "\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0";
</script>

<template>
  <form id="form" method="post" action="/" novalidate>
    <!-- 企业名称 -->
    <label class="name" for="name">
      <span class="require"
        >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*</span
      >&nbsp;企业名称：
      <input
        id="name"
        type="text"
        placeholder="请输入"
        autocomplete="off"
        name="name"
      />
    </label>

    <!-- 信用代码 -->
    <label class="name" for="name">
      <span class="require">*</span>&nbsp;社会统一信用代码：
      <input
        id="name"
        type="text"
        placeholder="请输入"
        autocomplete="off"
        name="name"
      />
    </label>

    <!-- 企业类型 -->
    <!-- \u00a0 -->
    <selects
      :placeStx="str"
      :list="complaintList"
      title="企业类型："
      :value="complaintTxt"
      @changeValue="changeComplaintTxt"
    />

    <!-- 姓名 -->
    <label class="name" for="name">
      <span class="require"
        >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*</span
      >&nbsp;姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：
      <input
        id="name"
        type="text"
        placeholder="请输入"
        autocomplete="on"
        name="name"
      />
    </label>

    <!-- 身份证号 -->
    <label class="useId" for="useId">
      <span class="require"
        >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*</span
      >
      &nbsp;身份证号：
      <input
        id="useId"
        type="text"
        placeholder="请输入"
        autocomplete="on"
        name="useId"
      />
    </label>

    <!-- 联系电话 -->
    <label class="tel" for="tel">
      <span class="require"
        >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*</span
      >&nbsp;联系电话：
      <input
        id="tel"
        type="tel"
        placeholder="请输入"
        autocomplete="on"
        name="tel"
      />
    </label>

    <!-- 联系地址 -->
    <label class="address" for="address" style="height: 72px">
      <span class="require"
        >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*</span
      >&nbsp;联系地址：
      <textarea
        name="address"
        placeholder="请输入"
        id="address"
        cols="30"
        rows="10"
      ></textarea>
    </label>

    <!-- 保存 -->
    <input
      id="submit"
      type="button"
      value="下一步"
      @click="emits('update:step', 1)"
    />
  </form>
</template>

<style scoped lang="scss">
#form {
  margin-top: 50px;
  @include flexColumnCenter;
  gap: 16px 0px;
}

.name,
.useId,
.tel,
.address {
  height: 36px;
  display: flex;
  align-items: center;
  color: #333333;
  cursor: pointer;

  > input {
    width: 480px;
    height: 100%;
    padding-left: 10px;
    background-color: #ffffff;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    color: #606266;
    box-shadow: 0 0 0 60px #fff inset;
  }
}

// 文本域的内容
textarea {
  width: 480px;
  height: 72px;
  color: #606266;
  border-radius: 4px;
  padding: 10px;
  border: 1px solid #dcdfe6;
  /* 防止拖拽文本域 */
  resize: none;
  /* 取消轮廓线 */
  outline: none;
  //  对于块级元素是无效的，只针对行内元素和行内块元素(input,img,textarea)
  //  主要是控制图片/表单与文字的对齐
  vertical-align: middle;
}

#submit {
  width: 232px;
  @include submit;
  margin-top: 24px;
}
</style>
